<template>
    <div>
        <van-nav-bar title="商品搜索" left-text="" left-arrow @click-left="() => { $router.push('/') }" />
        <van-search v-model="search_Name" show-action label="北京" placeholder="请输入搜索关键词" @search="onSearch">
            <template #action>
                <div @click="onClickButton">搜索</div>
            </template>
        </van-search>
    </div>
    <!-- 排版 -->
    <div v-show="status">
        <div>
            <h3 style="margin-left: 20px;">热门搜索</h3>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 30px;">电视</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">电脑</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">冰箱</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">台灯</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">手机</van-tag>
        </div>
        <div>
            <h3 style="margin-left: 20px;">历史记录</h3>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 30px;">电视</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">电脑</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">冰箱</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">台灯</van-tag>
            <van-tag color="#7232dd" plain size="large" style="margin-left: 10px;">手机</van-tag>
        </div>
    </div>
    <div>
        <div v-if="gujia">
            <van-skeleton title :row="20" />
        </div>
        <div v-show="!status" v-else>
            <van-cell-group v-for="item in searchData">
                <router-link :to="{ name: 'detail', params: { goods_id: item.goods_id } }">
                    <van-cell :title="item.goods_name" />
                </router-link>

            </van-cell-group>
        </div>
        <div v-show="seartch_null">
            <van-empty image="search" description="空,没有数据！" />
        </div>
    </div>



</template>

<script setup>
import { ref, watch } from 'vue';
import { qsearchApi } from '@/api/api'
import _ from 'lodash';
const searchData = ref([])
const search_Name = ref('')
const status = ref(true)
const seartch_null = ref(false)
const gujia = ref(false)
watch(search_Name, _.debounce((value) => {
    console.log('搜索内容', value);
    if (value.length == 0) {
        status.value = true
    }
    else {
        status.value = false
        seartch_null.value = false
        qsearchApi(value).then(res => {
            console.log('搜索数据', res);
            searchData.value = res.data.message
            if (searchData.value.length == 0) {
                seartch_null.value = true
            }
            gujia.value = true
        })
    }
}, 2000))
setInterval(() => {
    gujia.value = false
}, 1000);
</script>

<style lang="scss" scoped></style>